<link href="modules/bigscreen/css/bigscreen.css" rel="stylesheet"/> 
<link href="modules/bigscreen/css/btlibrary.css" rel="stylesheet"/> 
<link href="vendor/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="vendor/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 
<style>
	.top-bar {padding: 10px 0;border-bottom: 1px solid #f7f7f7;line-height: 28px;}
      .navbar-inverse {border: none;}
      .navbar {
          border-radius: 0;
          margin-bottom: 0;
          background: #151515;
          padding: 15px 0;
          padding-bottom: 0;
      }
      .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
          border-top: 0;
          padding-bottom: 0;
      }
      .item{width:100%;height:20%;overflow:hidden;}
      /*.item img{width:100%;}*/
      .carousel-caption{color:white; padding-bottom: 50px;background: linear-gradient(to bottom,rgba(189,181,181,0.5) 0,rgba(0,0,0,.0001) 100%);}
      #myCarousel .carousel-indicators .active {width: 20px;height: 20px;background-color: #c52d2f;margin: 0 15px 0 0;border: 1px solid #c52d2f;position: relative;}
      #myCarousel .carousel-indicators li {width: 20px;height: 20px;background-color: #fff;margin: 0 15px 0 0;position: relative;}
      .border{border:1px dotted #1b8ab5;border-radius:5px;overflow:hidden}
      .border1{border-bottom: 1px solid #797474;}
      .border1 span{color: #eae4e4;}
      .border1 h2{color: #de4d4d;text-align: center;}
      .users{background-color: #363c33;border-spacing: 1px;border-radius: 4px;opacity: 0.6;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-box-shadow: 0 0 0px 1000px #ffffff inset;padding: 6px 12px;margin: 2px;}
      .users span{color: #0278de;}
      .users div{color: red;text-align: right;}
      
	  .bg{background-size:100% 100%; background: linear-gradient(#34347d,#252432) ;background-image: url(./images/bg.png);}
	  .row{margin-top:5px;}
    #ulll li{border:1px solid #ccc;float:left;margin:10px;width:400px;}
    #ulll li div{float:left;color:black;}
    #ulll li img{width:150px;height:200px; }
    .caption{background: none;}
    .bg-blue {background: #4fc0f5!important;border: 1px solid #4fc0f5!important;}
    .list-unstyled li{padding-bottom: 3px;}
    .center{
	position: absolute;
	width:100%;
	height:100%;
	padding:20px;
	background:linear-gradient(#34347d,#252432);
	color:#fff;
	transform: translate(-13%, -15%) scale(0.75);
	}
	.dashboard {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		padding-top: 5%;
		background: linear-gradient(#34347d,#252432);
		background-size: 100% 100%;
	}
	.row{
	  margin-left:0px;
	}
	.inverted {
		display: inline-block;
		opacity: 0.7;
		-webkit-box-reflect: below -25px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white));
	}


    /*以下所有是针对第五个页面的*/
    .heading{background:-webkit-linear-gradient(top,#f1e060 60%,#f6f5f9 30%,#f1e060);color:transparent;-webkit-background-clip:text;}
    .title{color:#24b4e4;}
    .reader{color:white;}
    .reader span{color:#df3909;font-size:60px;font-family:"Times New Roman",Georgia,Serif;}
    .progress_define{background: #30f253; border-radius:10px;overflow:hidden}
    .progress{background:none;height:40px;margin-bottom: 40px;} /*修改5*/
    .users1{color:white;}
    .users1 p{font-size:50px;float:left;} /*修改6*/
    .users1 span{font-size:50px;float:right;} /*修改7*/
    .introduction p{color:white;font-size:36px;}/*修改10*/
    .alignCenter{text-align: center;}
    .redColor{color:red;}
    .whiteColor{color:white;font-size: 30px;}
    .bookInfor{font-size:15px;}
    .col-center-block {  float: none;  display: block;  margin-left: auto;  margin-right: auto;  }  
 </style>
<div style="background-size: 3840px 2160px;">
<div id="area1" style="left: 0px; top: 0px; width: 1260px; height: 330px; border: 0px solid blue; position:absolute;color:#24b4e4;"> 
   <div style="position: absolute;top:10px;"> 
   	<div style="float:left;padding-top:14px;">
		<img src="./images/icon.png" style="width: 480px;" />
	</div>
	<div style="float:left">
		<span class="maintitle" style="margin: 0px auto 20px 30px; font-size: 120px;">大兴区图书馆</span>
		<br/> 
		<span class="maintitle" style="font-size: 60px; margin: 20px auto 20px 30px;">DAXING DISTRICT LIBRARY</span> 
	</div>
	</div>
  </div> 
  <!--logo 标题结束-->
  <!--天气+入馆/出馆/在管人数开始-->
  <div id="area2" style="left: 1280px; padding-left:10px; top: 0px; width: 1260px; height: 392px; border: 0px solid blue; position: absolute; text-align: right;"> 
    <!-- 天气开始 -->
    <iframe allowtransparency="true" frameborder="0" width="1260" height="165" scrolling="no" src="http://tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=0&d=2&bd=0&k=&f=ffffff&q=1&e=1&a=1&c=54511&w=1260&h=165&align=center"></iframe>
    <!-- 天气结束 -->
    <!--入馆/出馆/在管人数开始-->
  	<div class="row">
  	  <div class="col-sm-4 col-xs-4">
  		  <h3 class="heading alignCenter" style="font-size:90px;"><b>入馆人数</b><h3>
  		  <h3 class="redColor alignCenter" style="background: -webkit-linear-gradient(top,red 49%,#ffb7b7 2%,red);color: transparent;-webkit-background-clip: text;font-size: 90px;"><b>{{peopleCount.dayCount.enterCount}}</b></h3>
  	  </div>

  	  <div class="col-sm-4 col-xs-4">
  		  <h3 class="heading alignCenter" style="font-size:90px;"><b>出馆人数</b><h3>
  		  <h3 class="redColor alignCenter" style="background: -webkit-linear-gradient(top,red 49%,#ffb7b7 2%,red);color: transparent;-webkit-background-clip: text;font-size: 90px;"><b>{{peopleCount.dayCount.exitCount}}</b></h3>
  	  </div>

  	  <div class="col-sm-4 col-xs-4">
  		  <h3 class="heading alignCenter" style="font-size:90px;"><b>在馆人数</b><h3>
  		  <h3 class="redColor alignCenter" style="background: -webkit-linear-gradient(top,red 49%,#ffb7b7 2%,red);color: transparent;-webkit-background-clip: text;font-size: 90px;"><b>{{(peopleCount.dayCount.enterCount - peopleCount.dayCount.exitCount) < 0 ? 0 : (peopleCount.dayCount.enterCount - peopleCount.dayCount.exitCount)}}</b></h3>
  	  </div>
  	</div>
    <!--入馆/出馆/在管人数结束-->
  </div> 
  <!--天气+入馆/出馆/在管人数结束-->

  <!--借阅此时排行榜开始-->
  <div id="area3" style="left: 2560px; top: 0px; width: 1260px; height: 787px; border: 0px solid blue; position: absolute;"> 
    <h3 class="heading" id="borrowRank" style="width:100px;float:left;height:400px;font-size: 60px;"><b>借阅次数排行</b></h3>
    <div id="chartborrow" style="width:1140px; float:left;height:100%; border: 0px solid yellow;" data-highcharts-chart="122"></div> 
  </div> 
  <!--借阅此时排行榜结束-->

  <!--读者排名开始-->
  <div id="area4" style="left: 0px; top: 330px; width: 1260px; height: 947px; border: 0px solid blue; position: absolute;"> 
  	<!--今天排名开始-->
    <h1 class="reader" style="border-bottom: 1px solid #ffffff;margin-left:20px;font-size:60px;">您是今天第&nbsp;<span id="cin" class="hugeNum" style="font-size:100px;">{{peopleCount.dayCount.enterCount}}</span>&nbsp;位读者</h1>
    <!--今天排名结束-->
    <!--其余排名开始-->
  	<div style="margin-left:20px;">
  		<div class="users1" >
  			<p>本周到馆人数:</p><span>{{peopleCount.weekCount.enterCount}}  人</span>
  			<div class="clearfix"></div>
  			<div>
  			  <div class="progress progress_bg" style="width:76%;">
  				<div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 60%;"></div>
  			  </div>
  			</div>
  		</div> 

  		<div class="users1">
  			<p>上月到馆人数:</p><span>{{peopleCount.lastMonthCount.enterCount}}  人</span>
  			<div class="clearfix"></div>
  			<div>
  			  <div class="progress progress_bg" style="width:76%;">
  				<div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 80%;"></div>
  			  </div>
  			</div>
  		</div> 
  		<div class="users1">
  			<p>本月到馆人数:</p><span>{{peopleCount.monthCount.enterCount}}  人</span>
  			<div class="clearfix"></div>
  			<div>
  			  <div class="progress progress_bg" style="width:76%;">
  				<div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 65%;"></div>
  			  </div>
  			</div>
  		</div> 

  		<div class="users1">
  			<p>累计到馆人数:</p><span>{{peopleCount.totalCount.enterCount}}  人</span>
  			<div class="clearfix"></div>
  			<div>
  			  <div class="progress progress_bg" style="width:76%;">
  				<div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 89%;"></div>
  			  </div>
  			</div>
  		</div>
  	</div>
    <!--其余排名结束-->
  </div> 
  <!--读者排名结束-->

  <!--实时入馆人数开始-->
  <div id="area5" style="left: 1280px; top: 452px; width: 1260px; padding-left:10px;height: 660px; border: 0px solid blue; position: absolute;"> 
   	<div> 
      <h3 class="heading" style="font-size:60px;"><b>实时入馆数据</b></h3>
    </div>
   <div id="entrance" style="width:100%;height:100%; border: 0px solid yellow;" data-highcharts-chart="121"> 
   </div> 
  </div>
  <!--实时入馆人数结束--> 
  <!--外借文献分布图开始-->
  <div id="area6" class="bookcirculation" style="left: 2560px; top: 787px; width: 1260px; height: 678px; border: 0px solid blue; position: absolute;"> 
    <div> 
      <h3 class="heading" style="font-size:60px;"><b>外借文献分布图</b></h3>
    </div> 
    <div id="chartCategory" style="width:100%; height:100%; border: 0px solid yellow;" data-highcharts-chart="120"> 
    </div> 
  </div> 
  <!--外借文献分布图结束-->

  <!--入馆指南开始-->
  <div id="area7" style="left: 0px; top: 1124px; width: 1260px;height: 881px; border: 0px solid blue; position: absolute;"> 
    <div class="row introduction" id="guide" style="margin-left:20px;">
        <h1 class="heading" style="font-size:60px;"><b>入馆指南</b></h1> 
        		<div class="clearfix"></div>

		<p>大兴区图书馆是读者阅览图书、搜寻资讯及参与读书活动的公共场所，是传播精神文明的重要窗口，因此图书馆的工作需要得到广大读者的支持和配合。为让广大读者享有舒适安静的阅读环境，享受到亲切温馨的服务，请到馆读者做到： </p>
        <p>1.讲文明，入馆时衣着整洁，不穿拖鞋、背心；<br/>
2.讲卫生，严禁在馆内吸烟、饮食、随地吐痰、乱扔垃圾；<br/>3.保持馆区安静，请勿在馆内喧哗及睡眠，严禁携带宠物及危险品进馆，不在馆内张贴广告、散发传单或推销商品。入馆请将电话等通讯设施置于静音状态。<br/>4.随身携带的包及其它与借阅无关的物品请寄放免费存包处，自带物品如有遗失，本馆恕不负责。<br/>5.爱惜各种资源及设施，如书籍、电脑、耳机等，损坏按规定赔偿。<br/>6.阅览区座位只供读者使用本馆馆藏，请勿以私人物品霸占阅览区座位。<br/>7.请尊重知识产权，不得自带复制设备自行复制本馆文献；珍贵文献原则上不得复印。。<br/>8.团体参观者，请提前与本馆预约；未经准许的团体于馆内进行非图书馆阅读活动者，本馆有权制止。<br/>遇有紧急事件发生时，请馆内读者依照工作人员的指引避难或疏散。<br/>请自觉遵守图书馆各项规定，配合工作人员管理。<br/></p>
    </div>
  </div> 
  <!--入馆指南结束-->

  <!--借还书总量、接待人次、藏书开始-->
  <div id="area8" style="left: 1280px; top: 1300px; width: 1260px; padding-left:10px; height: 738px; border: 0px solid blue; position: absolute;"> 
    <!--借还书总量开始-->	
  	<div class="row">
  		<div class="col-sm-6 col-xs-6 center-block">
  		  <div class="center-block" style="background-image: url(/images/borrow_bg.png);background-repeat:no-repeat;background-size: 400px 400px;width:401px;height: 401px;margin: 0 auto;">
  			  <div style="position: absolute;margin: 170px 114px;">
  				  <div class="countreturn" style="font-size: 50px; color:#D9D762;font-weight: 600;color:rgba(255,102,51,1)">{{bookCirculateStat.returns}}</div>
  			  </div>
  		  </div>
  		</div>
  		<div class="col-sm-6 col-xs-6">
  		  <div class="center-block" style="background-image: url(/images/borrow_bg.png);background-repeat:no-repeat;background-size: 400px 400px;width:401px;height: 401px;margin: 0 auto;">
  			  <div style="position: absolute;margin: 170px 114px;">
  				  <div class="countreturn" style="font-size: 50px; color:#D9D762;font-weight: 600;color:rgba(255,102,51,1)">{{bookCirculateStat.loans}}</div>
  			  </div>
  		  </div>
  		</div>
  	</div>
    <div class="row">
    	<div class="col-sm-6 col-xs-12">
    	  <h3 class="heading alignCenter" style="font-size: 40px;"><b>还入总册数：</b><h3>
    	  <h3 style="background-image: url(/images/smallborrow_bg1.png);background-repeat: no-repeat;background-size: 300px 100px;background-position:center;line-height: 110px;" class="whiteColor alignCenter">{{bookCirculateStat.returns}}</h3>
    	</div>
    	<div class="col-sm-6 col-xs-12">
    	  <h3 class="heading alignCenter" style="font-size: 40px;"><b>借出总册数：</b><h3>
    	  <h3 style="background-image: url(/images/smallborrow_bg2.png);background-repeat: no-repeat;background-position:center;background-size: 300px 100px;line-height: 110px;" class="whiteColor alignCenter">{{bookCirculateStat.loans}}</h3>
    	</div>
    </div>
    <!--借还书总量结束-->
    <!--接待人次、藏书开始-->
    <div class="row">
    	<div class="col-sm-6 col-xs-12">
    	  <h3 class="alignCenter" style="color: #acff48;font-size: 40px;"><b>{{year}}年接待读者人次：</b><h3>
    	  <h3 class="alignCenter" style="font-family: Impact, Charcoal, sans-serif;font-size: 90px;color: #acff48;margin-right: 20px;">{{peopleCount.lastYearCount.enterCount}}</h3>
    	</div>
    	<div class="col-sm-6 col-xs-12">
    	  <h3 class="alignCenter" style="color: #35ff2b;font-size: 40px;"><b>馆藏纸质图书册数：</b><h3>
          <h3 class="alignCenter" style="font-family: Impact, Charcoal, sans-serif;font-size: 90px;color: #35ff2b;">{{bookCollectionStat.items}}</h3>
    	</div>
    </div>
	  <!--接待人次、藏书结束-->
  </div> 
  <!--借还书总量、接待人次、藏书结束-->

  <!--新书推荐开始-->
  <div id="area9" style="left: 2560px; top: 1464px; width: 1260px; height: 352px; border: 0px solid blue; position: absolute;"> 
   <div> 
    <h3 class="heading" style="font-size:60px;"><b>新书推荐</b></h3>
   </div> 
  </div> 
  <div ng-repeat="book in newBooks" style="left: 2560px; top: 1560px; padding-left:10px; width: 1260px; height: 312px; border: 0px solid blue; position: absolute;"> 
   <div id="area9-{{$index+1}}">
   <div style="float:left;width:400px;"> 
    <table> 
     <tbody> 
      <tr> 
       <td><img ng-src="{{book.image.large}}" style="width: 400px;" /></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div style="float:left;width:800px;padding-left:20px;"> 
    <span id="book_intro{{$index+1}}" style="display:inline-block;font-size:40px;color:white" title="{{book.briefIntroduction}}">{{book.briefIntroduction == null? '暂无简介' : book.briefIntroduction | truncate: 110}}</span> 
   </div>
   </div>
  </div> 
</div>

